<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container" v-if="query.title">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: '/' }">
          {{ query.title }}
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle title="产量统计" class="float margin" style="width: 99%">
          <div class="cntj_box flex_between">
            <div class="cntj_item backgroung">
              <nav class="flex_center" :class="'text_' + color[0]">
                当日累计产量
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item"
                  :class="['border_' + color[0]]">
                  <div class="number" :class="'text_shadow_' + color[0]">
                    {{ dayBotleCountXiang || 0 }}
                  </div>
                  <div class="unit">箱</div>
                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item"
                  :class="['border_' + color[0]]">
                  <div class="number" :class="'text_shadow_' + color[0]">
                    {{ dayBotleCount || 0 }}
                  </div>
                  <div class="unit">瓶</div>
                </div>
              </div>
            </div>
            <div class="cntj_item backgroung" v-for="(item, index) in top1" :key="index" v-show="item.name != '当日累计产量'">
              <nav class="flex_center" :class="'text_' + color[index]">
                {{ item.name }}
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction" :class="[
                    'border_' + color[index],
                    item.name != '当日累计产量'
                      ? 'cntj_item_content_item'
                      : 'cntj_item_content_item-100',
                  ]">
                  <div class="number" :class="'text_shadow_' + color[index]">
                    {{ item.value1 }}
                  </div>
                  <!-- <div class="unit" >瓶</div> -->
                  <div class="unit">标准箱</div>
                </div>
                <div class="cntj_item_content_item flex_center_direction" :class="'border_' + color[index]"
                  v-show="item.value2 != null">
                  <div class="number" :class="'text_shadow_' + color[index]">
                    {{ item.value2 }}
                  </div>
                  <div class="unit">吨</div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle>
      </div>
      <div class="content_center">

        <StrokeTitle title="环比产量分析" class="float margin" style="width: 32.4%">
          <div class="flex_center Echarts" style="height: 100%">
            <div class="calculagraph_left">
              <Ring class="ring" :data="{ allRate: center2.thisMonth }" subtext="" titleTop="43%" />
              <div class="label" style="margin-top: 1px">实际值/标准箱</div>
            </div>
            <div class="calculagraph_right">
              <StrokeItem rightWidth="60%" leftWidth="40%" title="上期" :number="center2.thatMonth" />
              <StrokeItem6 rightWidth="60%" leftWidth="40%" style="margin-top: 8px" title="环比变化" :number="center2.rate"
                unit="%" />
            </div>
          </div>
        </StrokeTitle>
        <!-- <StrokeTitle
          title="日产量分布"
          class="float margin"
          style="width: 32.4%"
        >
          <div class="flex_center">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange($event, 4)"
            />
            <div
              class="all_box"
              style="margin-left: 0px"
              @click="productRecordDetailCount4All"
            >
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <PieImg
              :data="center3"
              legendLeft="44%"
              :legendLength="query.length"
              length="5"
              itemWidth="0.95"
              cirLeft="1.2"
              :img="require('@/assets/images/echarts/dzbccp3.png')"
            />
          </div>
        </StrokeTitle> -->
        <!-- <StrokeTitle title="追加分布" class="float margin" style="width: 32.3%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange($event, 3)" />
            <div class="all_box" style="margin-left: 0px" @click="productRecordDetailCount3All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <PieImg :data="center2" legendLeft="29%" :legendLength="query.length" length="5" itemWidth="0.95"
              cirLeft="0.2" :img="require('@/assets/images/echarts/dzbccp2.png')" />
          </div>
        </StrokeTitle> -->
        <StrokeTitle2 title="同比产量分析" class="float margin" style="width: 32.3%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" :options="[
                {
                  value: 'month',
                  label: '当月',
                },
                { value: 'quarter', label: '当季' },
              ]" @change="radioChange($event)" />
          </div>
          <div class="flex_center Echarts" style="height: 100%" slot="content">
            <div class="calculagraph_left">
              <Ring class="ring" :data="{ allRate: center3.thisMonth }" subtext="" titleTop="43%" />
              <div class="label" style="margin-top: 1px">实际值/标准箱</div>
            </div>
            <div class="calculagraph_right">
              <StrokeItem rightWidth="60%" leftWidth="40%" title="上期" :number="center3.thatMonth" />
              <StrokeItem6 rightWidth="60%" leftWidth="40%" style="margin-top: 8px" title="同比变化" :number="center3.rate"
                unit="%" />
            </div>
          </div>
        </StrokeTitle2>
        <StrokeTitle2 title="实际产量分析" class="float margin" style="width: 32.3%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange($event, 2)" />
            <div class="all_box" style="margin-left: 0px" @click="productRecordDetailCount2All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content" style="height: 100%;">
            <PieImg :data="center1" legendLeft="29%" :legendLength="query.length" length="5" itemWidth="0.95"
              cirLeft="0.2" :img="require('@/assets/images/echarts/dzbccp1.png')" />
          </div>
        </StrokeTitle2>
      </div>
      <div class="content_bottom">
        <StrokeTitle2 title="当月产量统计" class="float margin" style="width: 99%">
          <div class="flex_center" slot="select">
            <div class="all_box" style="margin-left: 0px" @click="radioChange5">
              当月
            </div>
            <el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="bottomForm.monthDate"
              @change="productRecordDetailCount5" type="month" placeholder="选择月" :clearable="false" :editable="false">
            </el-date-picker>
          </div>
          <MoreDirection :data="bottom" :legendData="['产量']" :isMoretooltip="true" :isCategory="false" barWidth="21"
            style="height: calc(100% - 0px)" :yAxisLineShow="true" :xAxisLineShow="true" yUnit="标准箱" slot="content" />
        </StrokeTitle2>
      </div>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
  import {
    ProductRecordDetailCount1,
    ProductRecordDetailCount2,
    // ProductRecordDetailCount3,
    // ProductRecordDetailCount4,
    ProductRecordDetailCount6,
    ProductRecordDetailCount5,
  } from "@/api/echarts/capacityDesign/index";
  import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
  import StrokeItem6 from "@/components/myComponents/stroke/item6.vue";
  import { GetBottleDay, GetBoxDay } from "@/api/echarts/index";
  import TwoRow from "../../components/echarts/bar/twoRow.vue";
  export default {
    components: {
      TwoRow,
      StrokeTitle2,
      StrokeItem6,
    },
    name: "CapacityDesign",
    data() {
      return {
        model: "month",
        color: ["blue", "orange", "green", "pink"],
        //产量统计,
        top1: [
          { name: "当月累计产量", value1: 0, value2: 0 },
          { name: "当月累计产量", value1: 0, value2: 0 },
          { name: "当月累计产量", value1: 0, value2: 0 },
        ],
        //产量分布
        center1: [],
        center1Form: {
          pDateEnd: this.$getMonth("e", 0),
          pDateStart: this.$getMonth("s", 0),
        },
        //追加分布
        // center2: [],
        //环比变化
        center2: {
          rate: '0',
          thatMonth: '0',
          thisMonth: '0',
        },
        center2Form: {
          pDateEnd: this.$getMonth("e", 0),
          pDateStart: this.$getMonth("s", 0),
          countType: ""
        },
        center3Form: {
          pDateEnd: this.$getMonth("e", 0),
          pDateStart: this.$getMonth("s", 0),
          countType: "1"
        },
        //同比变化
        center3: {
          rate: '0',
          thatMonth: '0',
          thisMonth: '0',
        },
        // //日产量分布
        // center3: [],
        // center3Form: {
        //   pDateEnd: this.$getMonth("e", 0),
        //   pDateStart: this.$getMonth("s", 0),
        // },
        bottomForm: { monthDate: this.parseTime(new Date(), "{y}-{m}-{d}") },
        //当月产量统计
        bottom: [],
        //产量统计分析
        dayBotleCount: 0,
        //产量统计分析-箱子
        dayBotleCountXiang: 0,
        //路由信息
        query: { length: 52, title: "" },
      };
    },
    activated() {
      this.onload();
      this.getBottleDay();
      this.getBoxDay();
      if (this.$route.query.length) {
        this.query = this.$route.query;
      } else {
        this.query = { length: 42, title: "" };
      }
    },
    methods: {
      onload() {
        //产量统计
        this.productRecordDetailCount1();
        //产量分布
        this.productRecordDetailCount2();
        // //追加分布
        // this.productRecordDetailCount3();
        // //日产量分布
        // this.productRecordDetailCount4();
        //当月产量统计
        this.productRecordDetailCount5();
        //环比产量分析
        this.productRecordDetailCount6();
        //同比产量分析
        this.productRecordDetailCount7()
      },

      //选择时间
      radioChange(event, num) {
        if (num) {
          this["center" + (num - 1) + "Form"].pDateStart = event[0];
          this["center" + (num - 1) + "Form"].pDateEnd = event[1];
          this["productRecordDetailCount" + num]();
        } else {
          this["center3" + "Form"].pDateStart = event[0];
          this["center3" + "Form"].pDateEnd = event[1];
          this["productRecordDetailCount" + 7]();
        }

      },
      //产量统计
      productRecordDetailCount1() {
        ProductRecordDetailCount1().then((res) => {
          if (res.code == 200) {
            this.top1 = res.data;
            // console.log(res.data)
          }
        });
      },
      //产量分布
      productRecordDetailCount2() {
        ProductRecordDetailCount2(this.center1Form).then((res) => {
          if (res.code == 200) {
            this.center1 = res.data;
          }
        });
      },
      //产量分布-全部
      productRecordDetailCount2All() {
        let obj = JSON.parse(JSON.stringify(this.center1Form));
        obj.all = "111";
        ProductRecordDetailCount2(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.tableData.column[0].label = "名称";
            this.$refs.AllDialog.right.unit = "%";
            this.$refs.AllDialog.tableData.data = res.data;
          }
        });
      },
      //环比产量分析
      productRecordDetailCount6() {
        ProductRecordDetailCount6(this.center2Form).then((res) => {
          if (res.code == 200) {
            this.center2 = res.data;
          }
        });
      },
      //同比产量分析
      productRecordDetailCount7() {
        ProductRecordDetailCount6(this.center3Form).then((res) => {
          if (res.code == 200) {
            this.center3 = res.data;
          }
        });
      },
      // //追加分布
      // productRecordDetailCount3() {
      //   ProductRecordDetailCount3(this.center2Form).then((res) => {
      //     if (res.code == 200) {
      //       // console.log(11111, res);
      //       this.center2 = res.data;
      //     }
      //   });
      // },
      // //追加分布
      // productRecordDetailCount3() {
      //   ProductRecordDetailCount3(this.center2Form).then((res) => {
      //     if (res.code == 200) {
      //       // console.log(11111, res);
      //       this.center2 = res.data;
      //     }
      //   });
      // },
      // //追加分布-全部
      // productRecordDetailCount3All() {
      //   let obj = JSON.parse(JSON.stringify(this.center2Form));
      //   obj.all = "111";
      //   ProductRecordDetailCount3(obj).then((res) => {
      //     if (res.code == 200) {
      //       this.$refs.AllDialog.dialogTableVisible = true;
      //       this.$refs.AllDialog.tableData.column[0].label = "名称";
      //       this.$refs.AllDialog.right.unit = "%";
      //       this.$refs.AllDialog.tableData.data = res.data;
      //     }
      //   });
      // },
      // //日产量分布
      // productRecordDetailCount4() {
      //   ProductRecordDetailCount4(this.center3Form).then((res) => {
      //     if (res.code == 200) {
      //       this.center3 = res.data;
      //     }
      //   });
      // },
      // //日产量分布-全部
      // productRecordDetailCount4All() {
      //   let obj = JSON.parse(JSON.stringify(this.center3Form));
      //   obj.all = "111";
      //   ProductRecordDetailCount4(obj).then((res) => {
      //     if (res.code == 200) {
      //       this.$refs.AllDialog.dialogTableVisible = true;
      //       this.$refs.AllDialog.tableData.column[0].label = "日期";
      //       this.$refs.AllDialog.right.unit = "%";
      //       this.$refs.AllDialog.tableData.data = res.data;
      //     }
      //   });
      // },
      //当月产量统计获取当月
      radioChange5() {
        this.bottomForm.monthDate = this.parseTime(new Date(), "{y}-{m}-{d}");
        this.productRecordDetailCount5();
      },
      //当月产量统计
      productRecordDetailCount5() {
        ProductRecordDetailCount5(this.bottomForm).then((res) => {
          if (res.code == 200) {
            this.bottom = [];
            for (var i = 0; i < res.data.length; i++) {
              let obj = {};
              obj.name = res.data[i].name;
              obj.value1 = res.data[i].value;
              obj.valueArr = res.data[i].valueArr;
              this.bottom.push(obj);
            }
          }
        });
      },
      //首页-产量统计-当日产量
      getBottleDay() {
        GetBottleDay().then((res) => {
          if (res.code == 200) {
            this.dayBotleCount = res.data.bottle;
            // this.dayBotleCountXiang = parseInt(res.data.bottle / 24);
          }
        });
      },
      //首页-产量统计-当日产量箱
      getBoxDay() {
        GetBoxDay().then((res) => {
          if (res.code == 200) {
            this.dayBotleCountXiang = res.data.bottle;
            // console.log(res)
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .productionDesign_box {

    .content {
      width: 100%;
      overflow: hidden;
      height: calc(100vh - 7rem);

      .content_top,
      .content_bottom,
      .content_center {
        width: 100%;
        height: 34.2%;
      }

      .calculagraph_right,
      .calculagraph_left {
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        position: relative;
        float: left;
        margin-left: -8%;
      }

      .calculagraph_right {
        width: 44%;
        align-items: flex-start;
        justify-content: center;
        height: 95%;
        margin-left: 0%;
      }

      .content_top {
        height: 28.7%;
      }

      .content_bottom {
        height: 29.7%;
      }

      .cntj_box {
        width: 100%;
        height: 100%;
        padding: 15px;

        .cntj_item {
          width: 24.5%;
          background: linear-gradient(180deg,
              rgba(44, 119, 187, 0.5) 0%,
              rgba(18, 81, 141, 0.5) 100%);
          border: 1px solid #2489ee71;
          height: 100%;
          padding: 15px;

          nav {
            font-size: 20px;
            background: rgba(35, 107, 173, 0.7);
            height: 32%;
            width: 100%;
            text-align: center;
          }

          .cntj_item_content {
            width: 100%;
            height: 66%;
            margin-top: 2%;

            .cntj_item_content_item {
              width: 49%;
              background-image: url("~@/assets/images/echarts/zhuangshi.png");
              background-size: 100% 100%;
              height: 100%;
              background-color: rgba(35, 107, 173, 0.7);

              .number {
                font-size: 37px;
              }

              .unit {
                font-size: 17px;
                margin-top: 0.2% !important;
                color: #ffffff;
              }
            }

            .cntj_item_content_item-100 {
              width: 100%;
            }
          }
        }

        .text_blue {
          color: rgba(0, 156, 255, 0.9);
        }

        .text_orange {
          color: rgba(255, 153, 0, 0.9);
        }

        .text_green {
          color: rgba(59, 255, 230, 0.9);
        }

        .text_pink {
          color: rgba(254, 58, 234, 0.9);
        }

        .text_shadow_blue {
          color: rgba(0, 156, 255, 0.9);
          text-shadow: 1px 0px 3px rgba(0, 156, 255, 1);
        }

        .text_shadow_orange {
          color: rgba(255, 153, 0, 0.9);
          text-shadow: 1px 0px 3px rgba(255, 153, 0, 1);
        }

        .text_shadow_green {
          color: rgba(59, 255, 230, 0.9);
          text-shadow: 1px 0px 3px rgba(59, 255, 230, 1);
        }

        .text_shadow_pink {
          color: rgba(254, 58, 234, 0.9);
          text-shadow: 1px 0px 3px rgba(254, 58, 234, 1);
        }
      }

      .Echarts {
        height: calc(100% - 50px);
      }
    }

    .ring {
      width: 128px;
      height: 128px
    }
  }
</style>